<template>
	<view class="tuandui">
		<NavBar>
			<template #center>
				<view class="tabWrap">
					<text style="navTitle">我的团队</text>
				</view>
			</template>
		</NavBar>

		<view class="mainWrap">
			
			<view class="shouyiWrap">
				
				<view class="headWrap">
					<view class="fooWrap">
						<!-- <image class="haedFirst" src="../../../static/img/homeServer/header_first.png" mode=""></image> -->
						<image class="haedImg" :src="data.httpUrl + '/app/file/viewFile?fileId=' + teamInfo?.appUser?.avatarId" mode="aspectFill"></image>
					</view>
					<view class="">
						<text class="name">{{ teamInfo?.appUser?.userName }}</text>
					</view>
					<!-- <view class="hhr">
						<image class="iconShengji" src="../../../static/img/homeServer/icon_diamond.png"></image>
						<text>{{ teamInfo?.partnerLevel?.name }}</text>
					</view> -->
					
					<TeamTag :partnerLevel="teamInfo?.partnerLevel"/>
					<view class="" style="flex: 1;">
						
					</view>
					<view class="yqhy"  @tap="shareToFriend">
						<text>邀请好友</text>
					</view>
				</view>
				
				
				<view class="syContent">
					<view class="syItem">
						<text class="label">日收益</text>
						<text class="num">{{ teamInfo?.todayScore || 0 }}</text>
					</view>
					<view class="syItem">
						<text class="label">总收益</text>
						<text class="num">{{ teamInfo?.totalScore || 0 }}</text>
					</view>
					<view class="syItem">
						<text class="label">待入账</text>
						<text class="num">{{ teamInfo?.waitSettleAmount || 0 }}</text>
					</view>
					<view class="syItem">
						<text class="label">直邀总数</text>
						<text class="num">{{ teamInfo?.sonCount || 0 }}</text>
					</view>
				</view>
				
				<view class="shengjiWrap"  @tap="shengji">
					<text>等级升级</text>
					<image src="../../../static/img/chevron-right.png" mode=""></image>
				</view>
			</view>

			<view class="listWrap">
				<view class="tabNav">
					<view class="tabItem" v-for="(v, i) in tabNavList" key="i" @tap="tabClick(i)">
						<text :style="{ color: '#000',marginBottom: '8rpx' }">{{ v.name }}</text>
						<view class="current" v-if="cur===i"></view>
						<view class="default" v-else></view>
					</view>
				</view>

				<view class="">
					<view class="example-body" v-if="cur===1">
						<uni-datetime-picker type="daterange" :value="dateValue" @change="changeLog">
							<view class="selectWrap">
								<text style="color: #000">筛选</text>
								<image class="iconDownSty" src="../../../static/img/chevron-down.png" mode=""></image>
							</view>
						</uni-datetime-picker>
					</view>
					<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" v-if="cur===0 || cur===1 || cur===2">
						<teanItemVue  @downCallback="downCallback" v-if="cur===0" :cur="cur" :item="item" v-for="(item, index) in list" key="index" />
						<teanItemVue v-if="cur===1" :cur="cur" :item="item" v-for="(item, index) in list2" key="index" />
						<teanItemVue v-if="cur===2" :cur="cur" :item="item" v-for="(item, index) in list3" key="index" />
					</mescroll-body>
					<view v-if="cur===3">
						<view class="conBox">
							<view class="contextLeft">
								<view style="display: flex;flex-direction: column;justify-content: space-between; height: 100%;width: 200rpx;">
									<view style="display: flex;flex-direction: column;padding-top: 24rpx;">
										<text style="font-size: 34rpx;font-weight: bold;">{{activity?.title}}</text>
										<text style="color: #8C8C8C;padding: 12rpx 0;">活动倒计时</text>
										<text style="color: #FF5C60;">{{activity?.remainDays}}</text>
									</view>
									<view style="display: flex;flex-direction: column;align-items: center; margin-bottom: 60rpx;">
										<text style="font-size: 42rpx;font-weight: bold;">{{activity?.inviteCount}}</text>
										<text style="color: color: #595959;font-size: 24rpx;">本赛季已邀请</text>
									</view>
								</view>
							</view>
							<view class="contextRight">
								<view v-for="(x,i) in activity?.ruleDescDTOS" :key="i">
									<view style="display: flex;align-items: center;margin-bottom: 24rpx;">
										<text style="width: 300rpx;color: #6AC922;">{{x.rule}}</text>
										<text>{{x.desc}}</text>
									</view>
								</view>
							</view>
						</view>
						<div style="background-color: #FFFDE4;border-radius: 24rpx;padding: 24rpx;margin: 24rpx 0 120rpx;">
							<rich-text :nodes="activity?.remark"></rich-text>
						</div>
						
						
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onLoad,onShow } from '@dcloudio/uni-app';
import { reactive, ref, watch  } from 'vue';
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import NavBar from '@/components/navBar.vue';
import teanItemVue from './components/teanItem.vue';
import { queryScoreIncreaseList, queryTeamInfo, queryUserInviteList,queryWaitShare, querySeasonActivity } from '@/utils/api/homeServer';
import { getHousekeeperView } from '@/utils/api/homeServer';
import TeamTag from './components/teamTag.vue';

const cur = ref(0);
const teamInfo = ref({});
const list = ref([]);
const list2 = ref([]);
const list3 = ref([]);
const activity = ref({});
const dateValue = ref(['2024-01-01 00:00:00','2050-01-01 23:59:59']);

const data = reactive<any>({
	httpUrl: getApp().globalData.baseUrl
});
const tabNavList = ref([
	
	{ id: 0, name: '直邀会员' },
	{ id: 1, name: '收益记录' },
	{ id: 2, name: '待入账'},
	{ id: 4, name: '官方活动'}

]);

watch(cur, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
	  if(newValue == 3){
		  querySeasonActivityFn()
	  }
});

const querySeasonActivityFn = async() =>{
	const {success,data} = await querySeasonActivity()
	if(success){
		activity.value = data
	}
	
}

const shengji = () =>{
	uni.navigateTo({
		url:"/pages/my/noble"
	})
}
function tef() {
	console.log('adb')
}
function changeLog(val) {
	console.log(val);
	val[0] = val[0]+' 00:00:00'
	val[1] = val[1]+' 23:59:59'
	dateValue.value = val
	downCallback();
	// page.value = 1
	// dateValue.value = val
	// getDetails()
}

//分享好友
	const shareToFriend = () => {
		uni.navigateTo({
			url: '/pages/addFriends/shareToFriends'
		})
	}
	
const tabClick = (index: any) => {
	cur.value = index;
	downCallback();
};

onLoad(() => {
	queryTeamInfoFn();
});

onShow(() => {
	queryTeamInfoFn();
});



const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

const upCallback = (mescroll: any) => {
	let api =
		cur.value === 0
			?queryUserInviteList({
				data: {
						pageNo: mescroll.num,
						pageSize: mescroll.size
					}
			})
			:  queryScoreIncreaseList({
					data: {
						startTime: dateValue.value[0],
						endTime: dateValue.value[1],
						pageNo: mescroll.num,
						pageSize: mescroll.size
					}
			  })
	if(cur.value===2){
		api=queryWaitShare({
			data: {
					pageNo: mescroll.num,
					pageSize: mescroll.size
				}
		})
	}		  
			  

	api.then((res) => {
		console.log(res.data);
		// res.data.list = [
		// 	{
		// 		"userId": 1111,
		// 		"userName": "test",
		// 		"avatarId": '1212',
		// 		"createTime":"203232--232",
		// 		"partnerLevel":{},
		// 	}
		// ]
		const curPageData = res.data.list || []; // 当前页数据
		if (mescroll.num == 1) list.value = []; // 第一页需手动制空列表
		if (cur.value === 0) {
			list.value = list.value.concat(curPageData); //追加新数据
		} else if(cur.value===1){
			list2.value = list.value.concat(curPageData); //追加新数据
		} else{
			list3.value = list.value.concat(curPageData)
		}

		//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
		//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;

		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
		mescroll.endByPage(curPageData.length, res.data.pages); //必传参数(当前页的数据个数, 总页数)

		//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
		// console.log(res.data.data.total);
		// mescroll.endBySize(curPageData.length, res.data.data.total); //必传参数(当前页的数据个数, 总数据量)

		//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
		//mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

		//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
		// mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
	}).catch(() => {
		mescroll.endErr();
	});
};

const queryTeamInfoFn = async () => {
	const { success, data } = await queryTeamInfo({});
	if (success) {
		teamInfo.value = data;
	}
};
</script>

<style lang="scss" scoped>
:deep(.navBarTop) {
	background-color: transparent;
	color: #fff;
}

page {
	background-color: #fff;
	height: 100%;
}

.tuandui {
	background: url("@/static/img/wode.png");
	width: 750rpx;
	height: 560rpx;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	// flex: 1;
	// background-image: url("@/static/img/wode.png");
	// background-repeat: no-repeat;
	// // background-size: 100% 70%;
	// width: 750rpx;
	// height: 610rpx;
}

.mainWrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	// padding-top: 10rpx;
}

.headWrap{
	display: flex;
	align-items: center;
}

.fooWrap {
	position: relative;
	margin-right: 24rpx;
}

.haedFirst {
	width: 300rpx;
	height: 189rpx;
}

.haedImg {
	width: 64rpx;
	height: 64rpx;
	border-radius: 64rpx;
	border: 4rpx solid #FFFFFF;
}

.hhr {
	display: flex;
	align-items: center;
	height: 48rpx;
	padding: 0 12rpx;
	background: linear-gradient( 90deg, #D6E8EF 0%, #DDE7FF 100%);
	border-radius: 12rpx 12rpx 12rpx 12rpx;

	text {
		height: 36rpx;
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 24rpx;
		color: #3D4C5F;
		line-height: 36rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
}

.yqhy{
	text-align: center;
	width: 109rpx;
	height: 48rpx;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	border: 2rpx solid #1188FF;
	
	
	text{
		width: 93rpx;
		height: 36rpx;
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 24rpx;
		color: #1188FF;
		line-height: 36rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
}

.name {
	height: 54rpx;
	font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
	font-weight: normal;
	font-size: 36rpx;
	color: #262626;
	line-height: 54rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin-right: 16rpx;
}

.shouyiWrap {
	width: 686rpx;
	background-color: #ffffff;
	// background: linear-gradient(143deg, #402979 4%, #40338b 18%, #28256a 100%), #ffffff;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	border: 2rpx solid #eee;
	// border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2)) 2 2;
	margin: 40rpx 0 24rpx 0;
	padding: 24rpx;
}

.syContent {
	display: flex;
	// background-color: #403581;
	// border-radius: 24rpx 24rpx 24rpx 24rpx;
	height: 124rpx;
}

.shengjiWrap{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24rpx;
	width: 480rpx;
	height: 60rpx;
	background: linear-gradient( 262deg, #3CCCFF 0%, #6894FC 100%);
	border-radius: 12rpx 32rpx 12rpx 12rpx;
	margin-top: 24rpx;
	
	text{
		height: 36rpx;
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	
	image{
		width: 48rpx;
		height:48rpx
	}
}

.syItem {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.num {
	font-size: 42rpx;
	color: #000;
	font-weight: bold;
}

.label {
	color: #000;
	font-size: 24rpx;
	margin-top: 12rpx;
}

.listWrap {
	width: 686rpx;
	height: 100%;
	// background: #fff;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	border: 2rpx solid rgba(255, 255, 255, 0.2);
}

.tabNav {
	display: flex;
	// padding: 0rpx 100rpx 24rpx 100rpx;

	> view {
		flex: 1;
		display: flex;
		justify-content: center;
		padding: 14rpx;
		border-radius: 32rpx;

		text {
			text-align: center;
		}
	}
}

.selectWrap {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24rpx;
	width: 153rpx;
	height: 60rpx;
	background: #C8E0FF;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	
}

.iconDownSty {
	width: 32rpx;
	height: 32rpx;
}

.iconShengji{
	width: 36rpx;
	height: 36rpx;
}
.navTitle{
	color:#000
}

.current{
	width: 64rpx;
	height: 8rpx;
	background: linear-gradient( 90deg, #65BDFF 0%, #C7DBFF 100%);
	border-radius: 4rpx 4rpx 4rpx 4rpx;
}

.default{
	width: 64rpx;
	height: 8rpx;
}

.tabItem{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.conBox {
  background: #FFFFFF;
  display: flex;
  margin: 0 24rpx;
  border-radius: 36rpx;
  padding-top: 24rpx;
}

.contextRight{
	border-left: 1px solid #eee;
	padding-left: 24rpx;
}

.contextLeft{
	// height: 600rpx;
}

</style>
